﻿<style>
  .role_list .el-transfer-panel__item.el-transfer-panel__item {
    margin-left: 0;
    display: block!important;
  }
  .role_list .el-transfer {
    width: 700px;
    overflow-x: auto;
  }
  .role_list .el-transfer__buttons .el-button {
    display: block;
    padding:12px;
    margin-left: 0;
    margin-right: 0;
  }
  .role_list .el-transfer__buttons {
    padding: 0 10px;
  }
  .role_list .el-button [class*=el-icon-]+span {
    margin-left: 0;
  }
  .role_list .el-transfer-panel {
    width: 300px;
  }
  .role_list .el-dialog__body {
    overflow: hidden;
  }
  .role_list .el-transfer-panel__list.is-filterable {
    height: 400px;
    padding-top: 0;
  }
  .role_list .el-transfer-panel__body {
    height: 100%;
    min-height:450px;
  }
  .role_list .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<template>
  <div class="role_list">
    <query-table ref="query_table" :columns="columns" :query-fields="queryFields" :detail-fields="infoFields"
                 :append-buttons="appendButtons" base-url="/role" show-index></query-table>
   <el-dialog :title="role.name + '-权限分配'" :visible.sync="permissionDlgVisible" :close-on-click-modal="false" width="80%">
      <el-col v-if="role.officeRelated" span="6">
      <el-table
        v-loading="isLoading"
        :data="companyList"
        :key="'company_list_'+type"
        tooltip-effect="dark"
        max-height="500"
        :row-class-name="companyRowClassName"
        @row-click="handleCompanyClick"
        style="width: 100%"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column key="index" label="序号" type="index" align="center" width="50"></el-table-column>
        <el-table-column prop="shortName" show-overflow-tooltip align="center" label="公司名称" />
      </el-table>
      </el-col>
      <el-col span="18">
        <el-row style="overflow-x: auto">

      <el-transfer
        v-model="role.permissionList"
        filterable
        :titles="['可分配权限', '已分配权限']"
        :button-texts="['移除', '分配']"
        :props="{key:'id',label:'name'}"
        @change="saveRolePermission"
        :data="permissionList">
      </el-transfer>
        </el-row>
<!--      </el-form>-->
      </el-col>
      <span style="clear:both;"></span>
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button type="success"  @click="saveRolePermission">保存</el-button>-->
<!--        <el-button  @click="permissionDlgVisible = false">取消</el-button>-->
<!--      </span>-->
    </el-dialog>
  </div>
</template>
<script>
export default {
  $$route: {
    meta: {
      title: '角色管理'
    }
  },
  name: "RoleList",
  data() {
    return {
      isLoading: false,
      permissionDlgVisible: false,
      role: {},
      companyList: [],
      permissionList: [],
      permissionLoading: false,
      currentOffice: '',

      //展示列信息
      columns: [
        {id: 'name', name: '名称', align: 'left'},
        {id: 'code', name: '编码', width: 300,align:'left'},
        {
          id: 'officeRelated', name: '权限单位相关', width:200, formatter: (val) => {
            if (val) {
              return '是';
            } else {
              return '否';
            }
          }
        },
        {
          id: 'operation', name: '操作', type: 'button',width:300, children: [
            {text: '权限设置', permission: 'permission:update', click: this.openPermissionDlg},
            {text: '编辑', permission: 'sys_role:update', operation: 'edit'},
            {text: '删除', type: 'danger', permission: 'sys_role:delete', operation: 'delete'},
          ]
        },
      ],
      //查询条件区域附加按钮
      appendButtons: [{text: '新增', type: 'success', operation: 'create'}],
      //查询条件字段
      queryFields: [
        {id: 'name', name: '名称', colSpan: 6},
        {id: 'code', name: '编码', colSpan: 6},
        // {id: 'officeRelated', name: '单位相关', colSpan: 6, component: 'data-select',data:[{id:'true',name:'是'},{id:'false',name:'否'}]},
      ],
      infoFields: [{
        id: 'code',
        name: '编码',
        show: true,
        disableOnEdit: true //编辑时禁用
      }, {
        id: 'name',
        name: '姓名',
      }, {
        id: 'officeRelated',
        name: '单位相关',
        component: 'radio',
        defaultValue: false,
        disableOnEdit: true, //编辑时禁用
        optionList: [{id: true, name: '相关'}, {id: false, name: '不相关'}]
      }, {
        id: 'remark',
        name: '备注',
        component: 'textarea',
        colSpan: 24
      }],
    }

  },
  computed: {},
  created: function () {
    if (this.$route.params.type && this.$route.params.type.length > 0) {
      this.type = this.$route.params.type;
    }
    this.loadPermissionList();
    this.loadCompanyList();
  },
  watch: {
    '$route'(to, from) {
      this.type = to.params.type;
    },
  },
  methods: {

    //加载系统权限列表
    loadPermissionList: function () {
      this.$get("/permission/data", {}, (response) => {
        var list = this.$store.state.user.permissionList;
        if (!list) {
          list = [];
        }
        this.permissionList = JSON.parse(JSON.stringify(list));
      });
    },

    //加载角色权限
    loadRolePermissionList: function (roleId, officeId) {
      this.permissionLoading = true;
      this.$get("/permission/role/data", {roleId: roleId, officeId: officeId}, (data) => {
        if (data.data) {
          var list = [];
          for (var item of data.data) {
            list.push(item.id);
          }
          this.role.permissionList = list;
        }
      }, () => {
        this.permissionLoading = false;
      });
    },

    //打开权限分配对话框
    openPermissionDlg(item) {
      var role = JSON.parse(JSON.stringify(item));
      role.permissionList = [];
      role.level = 'branch_office';
      if (role.officeRelated) {
        if (!this.companyList || this.companyList.length <= 0) {
          this.$message.warning("暂无组织机构，无法分配权限")
          return;
        }
        role.officeId = this.companyList[0].id;
      } else {
        role.officeId = null;
      }
      this.role = role;
      this.permissionDlgVisible = true;
      this.loadRolePermissionList(this.role.id, this.role.officeId);
    },

    //保存权限关联数据
    saveRolePermission: function (id) {
      const message = this.$message;
      this.$post("/permission/update", {
        roleId: this.role.id
        , permissionIdList: this.role.permissionList
        , officeId: this.role.officeId
      }, (data) => {
        message.success('更新成功！');
      });

    },
    //处理公司选中事件
    handleCompanyClick(row, column, event) {
      this.role.officeId = row.id;
      this.loadRolePermissionList(this.role.id, row.id);
    },

    companyRowClassName({row, rowIndex}) {
      if (row.id == this.role.officeId) {
        return 'success-row'
      }
      return '';
    },

    //加载公司列表
    loadCompanyList() {
      // this.isLoading = true;
      this.$get(
          "/company/tree",
          {},
          (data) => {
            this.companyList = data.data;
          }
      );
    },
  },

}
</script>
